<template>
	<view class="app">
		<view class="page-tit row">
			<text class="f-m">修改密码</text>
		</view>
		<view class="input-wrap pwd-wrap row b-b">
			<text class="mix-icon icon-mima"></text>
			<input class="input" v-model="oldPassword" :password="!showOldPwd" type="number" maxlength="18" placeholder="请输入原密码" placeholder-style="color:#999;font-size:30rpx" />
			<text class="mix-icon icon-eye" :class="showOldPwd ? 'icon-yanjing': 'icon-biyan'" @click.stop.prevent="changeOldPwdState"></text>
		</view>
		<view class="input-wrap pwd-wrap row b-b">
			<text class="mix-icon icon-mima"></text>
			<input class="input" v-model="newPassword" :password="!showNewPwd" type="number" maxlength="18" placeholder="请输入新密码" placeholder-style="color:#999;font-size:30rpx" />
			<text class="mix-icon icon-eye" :class="showNewPwd ? 'icon-yanjing': 'icon-biyan'" @click.stop.prevent="changeNewPwdState"></text>
		</view>
		<view class="input-wrap pwd-wrap row b-b">
			<text class="mix-icon icon-mima"></text>
			<input class="input" v-model="rePassWord" :password="!showRePwd" type="number" maxlength="18" placeholder="请输入确认密码" placeholder-style="color:#999;font-size:30rpx" />
			<text class="mix-icon icon-eye" :class="showRePwd ? 'icon-yanjing': 'icon-biyan'" @click.stop.prevent="changeRePwdState"></text>
		</view>
		<mix-button ref="confirmBtn" text="提交" marginTop="80rpx" @onConfirm="confirm"></mix-button>
	</view>
</template>

<script>
	import {checkStr} from '@/common/js/util'
	import { updatePassword,userLogin } from '@/common/js/api'
	export default {
		data() {
			return {
				showOldPwd: false,
				showNewPwd:false,
				showRePwd:false,
				oldPassword: '',
				newPassword:'',
				rePassWord:'',
				code: '',
				userNum:''
			}
		},
		computed: {
			curUserInfo(){
				return this.$store.state.userInfo
			}
		},

		onLoad() {
			const {userNum} = this.curUserInfo;
			this.userNum = userNum
		},
		methods: {
			async confirm(){
				const {userNum,oldPassword, newPassword,rePassWord} = this;
				if(!checkStr(oldPassword, 'pwd')){
					this.$util.msg('原密码不符合要求');
					this.$refs.confirmBtn.stop();
					return;
				}
				if(!checkStr(newPassword, 'pwd')){
					this.$util.msg('确认密码不符合要求');
					this.$refs.confirmBtn.stop();
					return;
				}
				if(newPassword!==rePassWord){
					this.$util.msg('新密码和确认密码不一致！');
					this.$refs.confirmBtn.stop();
					return;
				}
				const res = await updatePassword({oldPassword,newPassword})
				this.$util.msg(res.msg);
				this.$refs.confirmBtn.stop();
				if(res.code === 200){
					// this.$util.msg("正在为你重新登录");
					uni.removeStorageSync('uniIdToken');
					const userObj = { userNum:userNum,password:newPassword}
					const res = await userLogin(userObj);
					if(res.code === 200){
						this.$store.commit('setToken', res.data);
						// this.$util.msg("重新登录成功");
					}else{
						uni.redirectTo({
						    url: '/pages/auth/login'
						});
						this.$util.msg("请重新登录");
					}
					setTimeout(()=>{
						uni.navigateBack();
					}, 1000)
				}
			},
			changeOldPwdState(){
				this.showOldPwd = !this.showOldPwd;
			},
			changeNewPwdState(){
				this.showNewPwd = !this.showNewPwd;
			},
			changeRePwdState(){
				this.showRePwd = !this.showRePwd;
			}
		}
	}
</script>

<style scoped lang="scss">
	.app{
		padding-top: 30rpx;
	}
	.page-tit{
		height: 80rpx;
		padding-left: 50rpx;
		font-size: 34rpx;
		color: #333;
		font-weight: 700;
	}
	.input-wrap{
		height: 110rpx;
		margin: 20rpx 50rpx 0;
		padding-right: 20rpx;
		
		&.pwd-wrap{
			position: relative;
			z-index: 100;
		}
		.input{
			flex: 1;
			font-size: 32rpx;
			color: #333;
		}
		.mix-icon{
			width: 60rpx;
			font-size: 40rpx;
			color: $base-color;
		}
		.icon-eye{
			width: auto;
			padding: 20rpx;
			font-size: 36rpx;
			color: #999;
			transform: translateX(14rpx);
		}
	}
</style>
